<template>
  <div id="views" style="">
    <div>
      <p class="title">原交易密码</p>
      <p class="content">
        <input type="password" v-model="oldPws" placeholder="请输入您的交易密码">
      </p>
      <p class="title">新交易密码</p>
      <p class="content">
        <input type="password" v-model="newPws" placeholder="请输入6位数字新交易密码">
      </p>
      <p class="title">确认密码</p>
      <p class="content">
        <input type="password" v-model="newPwsB" placeholder="请再次输入密码">
      </p>
      <p class="title">手机验证码</p>
      <p class="content codearea">
        <input type="number" v-model="code" @input="inputchange()" placeholder="请输入验证码">
        <tongdun-Countdown wt='2.6rem' hg='1rem'  ref="tdEle" beginMsg="获取验证码" refreshMsg="重新获取" timeout="1000" endtime="60" @run="getCode" @getTdToken="getTdToken"></tongdun-Countdown>
      </p>
    </div>
    <div class="paddingl_r">
      <button :class="submitClass" @click="sure">设置交易密码</button>
    </div>
  </div>
</template>
<script>
  import { editTransactionPws , getMbCode2 } from '../../http/api'
  export default {
    name: 'eidt_transaction_pws',
    components:{
      tongdunCountdown : resolve => { require(['../../components/tongdunCountdown'],resolve) },//同盾倒计时功能插件
    },
    data () {
      return{
        introduce:'修改交易密码',
        mobile:this.$store.state.mobile,
        oldPws:'',
        newPws:'',
        newPwsB:'',
        code:'',//验证码
        yzm_token:'',//同盾验证码
        submitClass: 'submitNot'
      }
    },
    computed : {
      listenChange () {
        return { oldPws:this.oldPws , code:this.code  , newPws:this.newPws  , newPwsB:this.newPwsB  , yzm_token :this.yzm_token  };
      }
    },
    watch:{
      'listenChange' ( val ){
        let thiz = this;
        this.inputchange();
        function slice(tar) {
          thiz[tar] =  thiz[tar].replace(/[^\d]+/g,'').slice(0,6);
        }
        slice('oldPws'); slice('newPws'); slice('newPwsB');
      }
    },
    methods:{
      inputchange(){
        this.submitClass = this.oldPws && this.code && this.newPws && this.newPwsB && this.yzm_token ? 'submit' : 'submitNot'
      },
      getTdToken(){
        let thiz = this;
        thiz.$refs.tdEle.getTdToken(function (res) {
          thiz.yzm_token = res.yzm_token;
          thiz.blackBox = res.blackBox;
          thiz.getCode();
        })
      },
      getCode(){
        let thiz = this;
        getMbCode2({yzm_token:thiz.yzm_token,blackBox:thiz.blackBox,token:''}).then(res => {
          if( res.code == 200 ){
            thiz.$refs.tdEle.begin();
            let toast = require('../../common/js/toast').toast;
            toast('验证码已发送至您的手机');
          }else{
            thiz.$refs.tdEle.resetTd();
          }
        })
      },
      sure(){
       let thiz = this;
       let toast = require('../../common/js/toast').toast;
       if( thiz.submitClass == 'submit' ){
         if( thiz.newPwsB != thiz.newPws ){
           toast('两次密码不一致');
         }else{
           if( thiz.newPws.length < 6 ){
             toast('新密码不能小于6位数');
           } else if( !thiz.yzm_token ){
             toast('请先完成智能验证！');
           }else{
             let params = {transactionPassword : thiz.oldPws , smscaptcha : thiz.code , newTransactionPassword:thiz.newPws};
             editTransactionPws(params).then( res =>{
               if( res.code == 200 ){
                 toast('修改成功');
                 thiz.$router.replace({path: '/setting'})
               }
             });
           }
         }
       }
     }
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  #views{

    padding:0 0.3rem;text-align: left;padding-top: .4rem;padding-bottom: 1.7rem;background: #f8f8f8;
    >div{
      background: #fff;padding:0 0.3rem;border-radius: 0.04rem;overflow: hidden;padding-bottom: .3rem;
      .title{
        font-size: .28rem;font-family: 'PingFang-SC-Bold';padding-top: 0.38rem;line-height: 100%;
      }
      .content{
        border-bottom: .02rem solid#E5E5E5;height: 1rem;overflow: hidden;
        input{
          height: 100%;font-size: .32rem;width: 100%;
        }
      }
      .codearea{
        position: relative;
        input{
          width: calc( 100% - 1.6rem );
        }
        >#cd_box{
          right:0!important;position:absolute;left:auto;float: right;width:2.6rem;
         /deep/ .countDown{
            width: 1.12rem;float: right;height: 0.45rem;font-size: 0.18rem;border-radius: 0.04rem;line-height: 0.45rem;margin-top: 0.28rem;background: #F8D448;;
          }
        }
      }
    }
    >.paddingl_r{
      background: none;margin-top: .38rem;padding:0;padding-bottom: 0.35rem;
      button{
        height: .88rem;line-height: .88rem;
      }
    }

  }
</style>
